Today, you are going to build a todo list website. This is a right of passage for any developer.
You can choose the type of todo list you want to build. It could be as simple as a website where you can list some items and cross them out. Or as complex as a Kanban-style task list like Trello.
Here is a website for inspiration:
Top Secret: Most developer jobs will be interviewed by someone who is a manager. The top piece of technology a manager uses is a task-manager like Trello or Jira. If you can build a good task-manager, you will definitely impress your future interviewer!
Reflection Time:
This is a place to journal your experience of completing this project. This will help you figure out how to improve as a developer.
Write down how you approached the project. What was hard, what was easy. How might you improve for the next project? What was your biggest learning from today? What would you do differently if you were to tackle this project again?
Reflection Time:
This is a place to journal your experience of completing this project. This will help you figure out how to improve as a developer.
Write down how you approached the project. What was hard, what was easy. How might you improve for the next project? What was your biggest learning from today? What would you do differently if you were to tackle this project again?
כדהדהדהכ
Give Feedback
What went well? What could be improved?
Reflection Time:
This is a place to journal your experience of completing this project. This will help you figure out how to improve as a developer.
Write down how you approached the project. What was hard, what was easy. How might you improve for the next project? What was your biggest learning from today? What would you do differently if you were to tackle this project again?
#app.py
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
# /// = relative path, //// = absolute path
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class Todo(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100))
complete = db.Column(db.Boolean)
@app.route("/")
def home():
todo_list = Todo.query.all()
return render_template("base.html", todo_list=todo_list)
@app.route("/add", methods=["POST"])
def add():
title = request.form.get("title")
new_todo = Todo(title=title, complete=False)
db.session.add(new_todo)
db.session.commit()
return redirect(url_for("home"))
@app.route("/update/<int:todo_id>")
def update(todo_id):
todo = Todo.query.filter_by(id=todo_id).first()
todo.complete = not todo.complete
db.session.commit()
return redirect(url_for("home"))
@app.route("/delete/<int:todo_id>")
def delete(todo_id):
todo = Todo.query.filter_by(id=todo_id).first()
db.session.delete(todo)
db.session.commit()
return redirect(url_for("home"))
if __name__ == "__main__":
db.create_all()
app.run(debug=True)
#---------------------base.html----------------------------#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
<div style="margin-top: 50px;" class="ui container">
<h1 class="ui center aligned header">To Do App</h1>
<form class="ui form" action="/add" method="post">
<div class="field">
<label>Todo Title</label>
<input type="text" name="title" placeholder="Enter Todo..."><br>
</div>
<button class="ui blue button" type="submit">Add</button>
</form>
<hr>
{% for todo in todo_list %}
<div class="ui segment">
<p class="ui big header">{{todo.id }} | {{ todo.title }}</p>
{% if todo.complete == False %}
<span class="ui gray label">Not Complete</span>
{% else %}
<span class="ui green label">Completed</span>
{% endif %}
<a class="ui blue button" href="/update/{{ todo.id }}">Update</a>
<a class="ui red button" href="/delete/{{ todo.id }}">Delete</a>
</div>
{% endfor %}
</div>
</body>
</html>
Give Feedback
What went well? What could be improved?
Reflection Time:
This is a place to journal your experience of completing this project. This will help you figure out how to improve as a developer.
Write down how you approached the project. What was hard, what was easy. How might you improve for the next project? What was your biggest learning from today? What would you do differently if you were to tackle this project again?
Approach to the Project: The provided code uses the Tkinter library to create a simple GUI application for adding a watermark to an image. It defines functions to add the watermark, handle the button click event, and opens a file dialog to select an image file. The chosen image is then processed and saved with the watermark added.
What Was Easy: The overall structure of the code is relatively straightforward, and the usage of Tkinter for creating the GUI is concise. The core logic of adding the watermark is also clear and follows a step-by-step process.
What Was Hard: The code lacks error handling and validation. For example, if the selected file is not an image or the font file ("arial.ttf") is missing, it may result in exceptions. Additionally, the code always saves the output image as "output.jpg" without considering the original file name or extension, which might not be desirable.
How to Improve for the Next Project:
Implement error handling and validation to handle potential exceptions and user errors gracefully. For instance, check if the selected file is a valid image file before proceeding with the watermarking process.
Allow users to specify the output file name and extension, either by opening a file dialog for saving or by appending the watermark to the original file with a new name.
Consider adding options for customizing the watermark's appearance, such as font size, color, and transparency, to provide more flexibility.
Improve the user interface by adding additional elements like progress indicators, preview of the watermarked image, or the ability to batch process multiple images.
Biggest Learning from Today: The biggest learning from today's code could be understanding how to use Tkinter to create a simple GUI application and integrate it with image processing using the PIL library. It demonstrates how to handle events, interact with file dialogs, and update the GUI with status messages.
What I Would Do Differently: If I were to tackle this project again, I would focus on incorporating error handling and validation from the beginning. Additionally, I would consider implementing more customization options for the watermark and improving the user interface to provide a better user experience.
Remember, reflection and continuous improvement are key to becoming a better developer.
Give Feedback
What went well? What could be improved?